<template>
	<view>
		<view class="delta" @click="clickDelta">
			<u-icon name="arrow-left" size="50rpx" color="#ffffff"></u-icon>
		</view>

		<swiper vertical :duration="400" :current="current" @change="changeVideo" easing-function="easeInOutCubic">
			<swiper-item v-for="(item ,index) in videoList" :key="item.id">
				<view class="box">
					<image :src="'https://wjlm.goldsu.cn'+item.images" mode="widthFix" v-if="current!=index"></image>
					<video :src="'https://wjlm.goldsu.cn'+item.video_a" autoplay loop :show-fullscreen-btn="false"
						v-else @timeupdate="timeupdate" ></video>
						<view class="text">
							<view class="">
								<u--text :lines="1" :text="item.title" color="#ffffff" size="36rpx" bold></u--text>
							</view>
							<view class="">
								<u--text :lines="2" :text="item.remark" color="#ffffff" size="28rpx"></u--text>
							</view>
							
						</view>
				</view>
				<view class="btn">
					<view class="" @click="setCollect(item)">
						<u-icon :name="item.user_collect?'heart-fill':'heart'" size="58rpx"
							:color="item.user_collect?'#FFCB71':'#ffffff'"></u-icon>
						<view class="">
							收藏
						</view>
					</view>
					<view class="">
						<u-icon name="server-fill" size="58rpx" color="#ffffff"></u-icon>
						<view class="">
							客服
						</view>
						<button open-type="contact"></button>

					</view>
					
					<view class="" v-if="type!==99">
						<u-icon name="share-fill" size="58rpx" color="#ffffff"></u-icon>
						<view class="">
							分享
						</view>
						<button open-type="share"></button>
					
					</view>
				</view>
			</swiper-item>
		</swiper>
		<Loading />
	</view>
</template>

<script>
	let currentTime = 0
	let videoListAll=[]
	export default {
		data() {
			return {
				videoList: [],
				current: 0,
				type:0
				
			}
		},
		onLoad(e) {
			let id = e.id
		this.type = e.type
			let title=e.title||''
         
			if (this.type == 99) {
				let data1=[]
				this.$myRuquest('home/user/video_collect').then(res => {
					res.data.data.forEach(item=>{
						item.video.user_collect=1
						data1.push(item.video)
					})
					let current = data1.findIndex(item => item.id == id)
					
					
					let data2=data1.splice(0,current)
					let data=[...data1,...data2]
					videoListAll=data
					
					let num=3
					if(videoListAll.length<3) num=videoListAll.length
					this.videoList=videoListAll.splice(0,num)
				})
			} else {
				this.$myRuquest('home/index/new_activity_list', {
					type:this.type,
					title
				}).then(res => {
					let data1 = res.data;
					let current = data1.findIndex(item => item.id == id)
					let data2=data1.splice(0,current)
					let data=[...data1,...data2]
					videoListAll=data
					
					let num=3
					if(videoListAll.length<3) num=videoListAll.length
          this.videoList=videoListAll.splice(0,num)
	
				})
			}

		},
		onShareAppMessage (){
			return {
				title:this.videoList[this.current].title,
				imageUrl:'https://wjlm.goldsu.cn'+this.videoList[this.current].images
			}
		},
		onUnload() {
			this.$myRuquest('home/index/play_number', {
				type: currentTime > 10 ? 1 : 2,
				video_id: this.videoList[this.current].id
			})
		},
		methods: {
			changeVideo(e) {
				this.$myRuquest('home/index/play_number', {
					type: currentTime > 10 ? 1 : 2,
					video_id: this.videoList[this.current].id
				})
				this.current = e.detail.current
				console.log(this.current,this.videoList.length-2,videoListAll.length)
				if(this.current==this.videoList.length-1&&videoListAll.length){
					let num=3
					if(videoListAll.length<3) num=videoListAll.length
					this.videoList.push(...videoListAll.splice(0,num))
				}
				
			},
			setCollect(item) {
				this.$myRuquest('home/user/collect_save', {
					collect_id: item.id,
					type: 3
				}).then(res => {
					item.user_collect = item.user_collect == 0 ? 1 : 0
				})

			},
			timeupdate(e) {
				currentTime = e.detail.currentTime
			},

			clickDelta() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.delta {
		position: fixed;
		left: 20rpx;
		top: 90rpx;
		z-index: 99;
	}

	swiper {
		width: 100vw;
		height: 100vh;

		swiper-item {
			width: 100%;
			height: 100%;
			background-color: #000;
			position: relative;

			.box {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 100%;

				image,
				video {
					width: 100%;
					height: 100vh;
				}
			}

			.btn {
				position: fixed;
				right: 30rpx;
				bottom: 200rpx;
				color: #ffffff;

				>view {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					text-align: center;
					margin-bottom: 40rpx;
					position: relative;

					button {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
						z-index: 99;
					}
				}
			}
		}
	}
	.text{

		color: #ffffff;
		position: fixed;
		bottom: 140rpx;
		left: 20rpx;
		width: calc(100vw - 200rpx);
		view:nth-child(2){
			margin-top: 20rpx;
		}
	}
</style>
